<script setup>
// 
// watch 函数
// 作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数
// 俩个额外参数:1.immediate (立即执行) 2.deep (深度侦听)
// 

import { ref } from 'vue'
import { watch } from 'vue';

let count = ref(0)
let name = ref('zs')
let age = ref({ user: 12, name: 'zs' })

// 单个监听
watch(count, (newCount, oldCount) => {
  console.log('count数据变化，新值为' + newCount + '。旧值为' + oldCount)
})


// 同时监听多个 
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log('count数据变化，新值为' + newCount + '。旧值为' + oldCount)
  console.log('name数据变化，新值为' + newName + '。旧值为' + oldName)
})

// immediate 在侦听器创建时立即触发回调,响应式数据变化之后继续执行回调
watch(count, (newCount, oldCount) => {
  console.log('count数据变化，新值为' + newCount + '。旧值为' + oldCount)
}, {
  immediate: true
})

// deep 深度侦听
// deep开启会递归遍历，影像性能。能不开启尽量不开启。
watch(age, () => {
  console.log(age.value)
}, {
  deep: true
})

// 深度监听对象中某一个值。第一个函数return出监听的值，第二个函数监听事件
watch(
  () => { age.value.user },
  () => {
    console.log('age发生了变化' + age.value.user)
  }, {
  deep: true
})

let addcount = () => {
  count.value++
  name.value = 'ls'
  age.value.user++
}
</script>

<template>
  <p>原数组：{{count}}</p>
  <button @click="addcount()">修改原数组的值</button>
</template>
 